import React from 'react'
import Logo from '../../component/logo/Logo'
import {
WingBlank,
Button,
WhiteSpace,
List,
InputItem,
Radio } from 'antd-mobile'
import { connect } from 'react-redux'
import { Redirect} from 'react-router-dom'

import { register } from '../../redux/user.redux'


const RadioItem = Radio.RadioItem;
@connect(
	state=>state.user,
	{register}
	)
class Register extends React.Component{

	constructor(props){
		super(props)
		this.login = this.login.bind(this)
		this.register = this.register.bind(this)
		this.state = {
			user:'',
			pwd:'',
			repeatpwd:'',
			type:'genius'  //或者boss
		}

	}

	login(){

		this.props.history.push('/login')
	}

	register(){
		this.props.register(this.state)
	}

	handleChange(key,val){
		this.setState({
			[key]:val
		})
	}

	render(){
		return (
			
				<div>
					{this.props.redirectTo?<Redirect to={this.props.redirectTo}/>:null}
				    <Logo></Logo>
				    <h2 style={{textAlign:'center'}}>注册页</h2>
				     <WingBlank>
				    	<List>
				    	{this.props.msg?<p className='error-msg'>{this.props.msg}</p>:null}
				    		<InputItem
				    			onChange={v=>this.handleChange('user',v)}
				    		>用户</InputItem>
				    		<WhiteSpace />
				    		<InputItem
								onChange={v=>this.handleChange('pwd',v)}
				    		>密码</InputItem>
				    		<WhiteSpace />
				    		<InputItem
				    			onChange={v=>this.handleChange('repeatpwd',v)}
				    		>确认密码</InputItem>
				    		<RadioItem checked={this.state.type==='genius'}
				    			onChange={v=>this.handleChange('type',"genius")}
				    		>
				    			牛人
				    		</RadioItem>
				    		<RadioItem checked={this.state.type==='boss'}
				    			onChange={v=>this.handleChange('type',"boss")}
				    		>
				    			boss
				    		</RadioItem>
				    	</List>
				    </WingBlank>
				    <WingBlank>
				    	<Button type="primary" onClick={this.login}>登录</Button>
				    </WingBlank>
				    <WingBlank/>
				    <WhiteSpace/>
				     <WingBlank>
				    	<Button type="primary" onClick={this.register}>注册</Button>
				    </WingBlank>
				</div>
			)
	}
}

export default Register